<%--可以直接写<%basePath%>或者${pageContext.request.contextPath}，获取的是localhost:8888/forum--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看看车吧</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/car.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<div id="car">
    <template>
        <div class="car">
            <!--导航头-->
            <div class="container" style="background: #1E9FFF;width: 100%;height: 65px">
                <div style="width: 85%;margin: 0 auto;">

                    <img src="../../2-post/images/logo.png" alt="" class="layui-circle"
                         style="height: 60px;width: 80px;">
                    <span style="font-size: x-large;color: #0C0C0C;font-weight: bolder;">爱车论坛</span>
                    <a href="../../2-post/post.html">
                        <span style="font-size: x-large;font-weight: bolder;color: #B1E1FF;margin-left: 50px">去看帖</span></a>

                    <!--<li class="layui-nav-item" style="margin-left: 50px;list-style: none;display: inline" id="first">-->


                    <ul class="newul">

                        <li style="float: right;margin-top: -20px;height: 95px;line-height: 95px">
                            <a href="../../4_user/personself/index.html">
                                <span style="font-size: medium;color: #B1E1FF">个人中心</span>
                            </a>
                        </li>


                        <li style="float: right;margin-top: -20px;margin-right: 40px;height: 95px;line-height: 95px">
                            <a href="../4_user/personself/index.html" class="noLog">
                                <span style="font-size: medium;color: #B1E1FF" class="noLog">登录</span>
                            </a>

                            <a href="" class="Log">
                                <span style="font-size: medium;color: #B1E1FF" class="Log">退出登录</span>
                            </a>
                        </li>

                        <li style="float: right;margin-top: -20px;height: 95px;line-height: 95px">
                            <a href="../4_user/personself/index.html" class="regist">
                                <span style="font-size: medium;color: #B1E1FF" class="regist">注册</span>
                            </a>

                            <a href="../4_user/personself/index.html" class="userInfo">
                                <img class="userImg" style="width: 50px;height: 50px">
                                <span style="font-size: medium;color: #B1E1FF;" class="userName"></span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!--导航头-->
        <div id="main" style="line-height:20px;height: 20px;cursor: pointer;margin-top: 20px">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item onclick="main()">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>看看车吧</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-container>
                <el-container>
                    <el-aside width="200px">
                        <div style="border:1px solid #e6e6e6;height: 300px;margin-top: 20px">
                            <span class="title" onclick="getSeries()">全部分类</span>
                            <div>
                                <ul id="carInfoUl"></ul>
                            </div>
                        </div>
                    </el-aside>
                    <el-main>
                        <div class="tooltip top" role="tooltip">
                            <div class="tooltip-arrow"></div>
                            <div class="tooltip-inner">
                                Some tooltip text!
                            </div>
                        </div>
                    </el-main>
                </el-container>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-size="pageSize"
                            :pager-count="4"
                            layout="prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
                <el-footer style="text-align: center">
                    <div class="content_nt mar_top8">
                        <div class="footer_nt">
                            <p><a href="http://www.xcar.com.cn/about/us/" target="_blank" rel="nofollow">关于论坛</a>|<a href="http://www.xcar.com.cn/about/job/"
                                                                                                                     target="_blank" rel="nofollow">招贤纳士</a>|<a href="http://www.xcar.com.cn/about/contact/" target="_blank" rel="nofollow">联系我们</a>|<a
                                    href="http://www.xcar.com.cn/about/links/" target="_blank">友情链接</a>|<a href="//newcar.xcar.com.cn/"
                                                                                                           target="_blank">选车中心</a>|<a href="//newcar.xcar.com.cn/photo/" target="_blank">汽车图片</a>|<a href="//club.xcar.com.cn/"
                                                                                                                                                                                                      target="_blank">汽车论坛</a>|<a href="http://www.xcar.com.cn/about/sitemap/" target="_blank">站点地图</a>|<a
                                    href="//my.xcar.com.cn/total_station_feedback.php" target="_blank" rel="nofollow">意见反馈</a>|<a href="http://www.xcar.com.cn/chezhan/beijing/"
                                                                                                                                  target="_blank">北京车展</a>|<a href="http://www.xcar.com.cn/chezhan/guangzhou/" target="_blank">广州车展</a>
                                <br />&copy;2002-2020
                                www.xcar.com.cn All rights reserved. 汽车论坛 版权所有.<input type="hidden" id="ICP" value="京ICP证：010391 号" />&nbsp;
                                电话：010-82616677 <br />
                            </p>
                        </div>
                    </div>
                </el-footer>
            </el-container>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                total: 1,//总条数  默认值不能为空
                pageSize: 16,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                sites:[]
            }
        },
        created() {
            this.getPage()
        },
        methods: {
            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getPage();
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getPage();
            },
            getPage(){
                var that = this;
                $.ajax({
                    type: 'get',
                    url: '/forum/car/CarManage',
                    dataType: 'json',
                    data: "pageNum=" + that.pageNum + "&pageSize=" + that.pageSize,
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.sites = data.data.list;
                            that.pageNum = data.data.pageNum;//当前页码
                            that.total = data.data.total;//总条数
                            that.pages = data.data.pages;//总页数
                            showSeries(that.sites);
                        }
                    }
                })
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#car");

    var total = 1;//总条数  默认值不能为空
    var pageSize = 16;//每页显示几条数据
    var pageNum = 1;//当前页
    var pages = 1;//总页数

    //<div class="img" v-for="item in sites" :key="item.carId">
    // <img :src=" '../images/'+ item.carImg">
    //     <span class="series">{{item.seriesName}}</span>
    // </div>
    function showSeries(jsonObj) {
        <%--var html = '';--%>
        <%--for (var i = 0; i < jsonObj.length; i++) {--%>
          <%--html += "<div class='img'>";--%>
        <%--&lt;%&ndash;${pageContext.request.contextPath}获取的是项目名localhost:8888/forum&ndash;%&gt;--%>
        <%--html += "<img src='${pageContext.request.contextPath}/cln/images/" + jsonObj[i].carImg +"'>";--%>
        <%--html += "<span class='series'>";--%>
        <%--html += jsonObj[i].seriesName;--%>
        <%--html += "</span></div>";--%>
        <%--}--%>
        <%--$('main').html(html)--%>
        $('main').empty();//清空
        $.each(jsonObj, function (i, result) {
            var item = "<div class='img' onclick=" + "getCarId('" + result['carId'] + "')>" +
                "<img src='http://qdl9h2nk4.bkt.clouddn.com/" + result['carImg'] + "'>" +
                "<span class='series'>" + result['seriesName'] + "</span></div>";
            $('main').append(item);//追加数据
        })
    }

    // 获取品牌
    function getBrand() {
        var _this = this;
        $.ajax({
            type: 'get',
            url: '/forum/brand/selectAllBrand',
            dataType: 'json',
            success: function (data) {
                // console.log(data);
                if (data.state === '200') {
                    _this.options = data.data;
                    console.log(_this.options);
                    showBrand(_this.options);
                }
            }
        })
    }

    // 获取车型
    function getSeries() {
        var _this = this;
        $.ajax({
            type: 'get',
            url: '/forum/car/CarManage',
            dataType: 'json',
            data: "pageNum=" + _this.pageNum + "&pageSize=" + _this.pageSize,
            success: function (data) {
                // console.log(data);
                if (data.state === '200') {
                    sites = data.data.list;
                    pageNum = data.data.pageNum;//当前页码
                    total = data.data.total;//总条数
                    pages = data.data.pages;//总页数
                    console.log(sites);
                    console.log(pageNum);
                    console.log(total);
                    console.log(pages);
                    $('main').empty();//清空
                    showSeries(sites);
                }
            }
        })
    }

    function showBrand(jsonObj) {
        // var html = '';
        // for (var i = 0; i < jsonObj.length; i++) {
        //     html += "<li onclick='getBrandId()'>";
        //     html += jsonObj[i].brandName;
        //     html += "</li>"
        // }
        // $('ul').html(html)
        $.each(jsonObj, function (i, result) {
            var item = "<li onclick=" + "getBrandCar('" + result['brandName'] + "')>" + result['brandName'] + "</li>";
            $('#carInfoUl').append(item);//追加数据
        });
        getSeries();
    }

    //根据品牌查询车系
    function getBrandCar(brand) {
        console.log(brand);
        $.ajax({
            type: 'post',
            url: '/forum/brand/selectBrandByBrandName',
            dataType: 'json',
            data: {brandName: brand},
            success: function (data) {
                console.log(data);
                var res = data.data;
                $('main').empty();//清空
                if (data.state === '200') {
                    $.each(res, function (i, result) {
                        var item = "<div class='img' onclick=" + "getCarId('" + result['carId'] + "')>" +
                            "<img src='http://qdl9h2nk4.bkt.clouddn.com/" + result['carImg'] + "'>" +
                            "<span class='series'>" + result['seriesName'] + "</span></div>";
                        $('main').append(item);
                    })
                }
            }
        })
    }

    function getCarId(carId) {
        sessionStorage.setItem("carId", carId);//sessionStorage本地存储数据
        // console.log(carId)
        window.location.href = "carbase.jsp"
    }

    function main(){
        window.location.href = "../../3_main/3_main.html";
    }

    getBrand();
</script>

<script>
    $.ajax({
        url: '/forum/user/getUserInfo',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            if (data.state == '0') {
                // alert("登陆失败");
                $('.noLog').show();
                $('.Log').hide();
                $('.userInfo').hide();
                $('.regist').show();
            } else if (data.state == '200') {
                // 登录了
                var parm = "userName=" + data.data.userName;
                // alert("登陆成功");
                $.ajax({
                    url: "/forum/usercenter/selectByUsetName",
                    data: parm,
                    type: "post",
                    success: function (data) {
                        $('.regist').hide();
                        $('.userInfo').show();
                        $('.userImg').attr("src", data.userPhoto);
                        $('.userName').text(data.userName);
                        $('.noLog').hide();
                        $('.Log').show();
                    }
                })
            }
        }
    })


    function qing() {
        alert("请先去登录")
    }

    function layout() {
        // 退出登录

    }
</script>
</html>
